<#--INFO-->
<template>
  <div>
    <!-- 单一根，指令才能生效，必须 v-modaldrag --->
<#assign rowOpen=false formColumnCount=form.formColumnCount colIndex=0><#-- 仅支持1列和2列-->

    <el-form :model="${table.beanName}" ref="${table.beanName}Form" >

<#list formFields as column>
  <#if rowOpen==true><#-- a-row标签还未结束 -->
    <#if column.newRow==true || (column.colSpan!0) gt 1><#-- 强制新起一行 或者 此form field独占一行 -->
        </el-row>
        <#assign rowOpen=false>
    </#if>
  </#if>

  <#if rowOpen==false><#-- 新的一行 -->
      <el-row :gutter="formGutter">
        <#assign rowOpen=true colIndex=0>
  </#if>

  <#assign colIndex=colIndex+column.colSpan>

  <#assign antColSpan=12>
  <#if formColumnCount==1 || (column.colSpan!0) gt 1>
    <#assign antColSpan=24>
  </#if>
        <el-col :span="${antColSpan}"><el-form-item label="${column.columnCaption!''}" name="${column.varName!''}" <#if formColumnCount gt 1 && column.colSpan gt 1>:label-col="{ span: 3 }"</#if>><#rt>
  <#if (column.codeType!'')?length gt 0>
          <#lt><el-input v-model="${table.beanName}.${column.varName}Caption" readonly :input-style="underlineElInputStyle" /><#rt>
  <#elseif (column.formElementType!'') == "10"><#-- MULTI_LINE_TEXT -->
          <#lt><el-input type='textarea' v-model="${table.beanName}.${column.varName}" readonly :autosize="true" :input-style="underlineElInputStyle" autosize/><#rt>
  <#elseif (column.formElementType!'') == "5"><#-- PERCENT_INPUT 百分比 -->
          <#lt><el-slider v-model:value="${table.beanName}.${column.varName}" disabled class="mydisabled"/><#rt>
  <#elseif (column.formElementType!'') == "16"><#-- CHECKBOX 单个勾选框 -->
          <#lt><el-checkbox v-model:checked="${table.beanName}.${column.varName}" disabled class="mydisabled" ></el-checkbox><#rt>
  <#elseif (column.formElementType!'') == "19"><#-- Switch 开关 -->
          <#lt><el-switch v-model:checked="${table.beanName}.${column.varName}" disabled checked-children="开" un-checked-children="关" /><#rt>
  <#elseif (column.formElementType!'') == "21"><#-- 评分 -->
          <#lt><el-rate v-model:value="${table.beanName}.${column.varName}" disabled  /><#rt>
  <#else>
          <#lt><el-input v-model:value="${table.beanName}.${column.varName}" readonly :input-style="underlineElInputStyle" /><#rt>
  </#if>
        <#lt></el-form-item></el-col>

  <#if colIndex gte 2><#-- 判断 row是否需要关闭。 目前只支持两列，打到两列就结束这一行-->
      </el-row>
        <#assign rowOpen=false>
  </#if>
</#list>
<#if rowOpen==true><#-- a-row标签还未结束 -->
      </el-row>
</#if>
    </el-form>

  <#if (table.attachmentType!'') == '2'><#-- 多个图片 -->
    <ImagesUpload bizType='${table.className}' :bizId='id'></ImagesUpload>
  <#elseif (table.attachmentType!'') == '3'><#-- 多个普通文件 -->
    <FilesUpload bizType='${table.className}' :bizId='id'></FilesUpload>
  </#if>

  </div>
</template>

<script lang="ts" setup>
/*
 * @author: ${author}
 * @date: ${nowTime}
 * @template: dayu-code-builder
*/
import { onMounted, reactive, computed } from 'vue'
import {underlineElInputStyle} from '@/utils/constants';
import { ${table.className}, ${table.beanName}Service } from '@/api/${sysName}/${table.className}Service'
import { IForm, formColGutter } from '@/common/FormModal'

const props = defineProps({
  id: Number
});
const formGutter = formColGutter;
/** 接口数据（和接口返回数据对应） */
const ${table.beanName}Data = reactive({${table.beanName}:<${table.className}>{}, codeTypes:{}, nameTypes:{}});
/** 表单数据 */
const ${table.beanName} = computed(() => ${table.beanName}Data.${table.beanName});

/** 获取表单数据 */
async function getFormData() {
  if (!props.id) return;
  try {
    let response: any = await ${table.beanName}Service.get${table.className}BO(props.id as number);
    ${table.beanName}Data.${table.beanName} = response.data.data || {};
    ${table.beanName}Data.codeTypes = response.data.codeTypes;
    ${table.beanName}Data.nameTypes = response.data.nameTypes;
  } catch (ex: any) {
    console.error("await error");
    console.error(ex);
  }
}

onMounted(() => {
  getFormData();
});


</script>

<style scoped>

</style>